<template>
    <div class="chart" style="width: 500px; height: 300px;">

    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    props: {
        chartData: {
            type: Array,
        }
    },
    mounted(){
        this.$nextTick(() => {
            this.initEcharts();
        });
    },
    methods: {
        initEcharts(){
            
            const myChart = echarts.init(document.querySelector('.chart'));
            
            const names = this.chartData.map(item => item.name);
            const money = this.chartData.map(item => item.chinese);
            let option = {
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: names
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: money,
                        type: 'line',
                        areaStyle: {}
                    }
                ]
            };
            myChart.setOption(option)
        }
    }
}
</script>

<style>


</style>